<template>
  <div class="weekStatement">
    <div class="header">
      <h1>考勤周报表</h1>
      <div class="header-right">
        <i class="el-icon-s-home"></i>
        <span class="font-left">首页</span>
        <i class="el-icon-arrow-right"></i>
        <span class="font-right">考勤周报表</span>
      </div>
    </div>
    <div class="content">
      <div class="bar">
        <div class="barLeft">
          <el-button type="primary" icon="el-icon-printer" size="mini" @click="printMySendList">打印</el-button>
          <el-button type="info" icon="el-icon-arrow-left" size="mini" @click="reduceWeek">上一周</el-button>
          <el-button type="info" icon="el-icon-arrow-right" size="mini" @click="increaseWeek">下一周</el-button>
          <div><span>{{ nowWeek }}</span>至<span>{{ nextWeek }}</span></div>
        </div>
        <div class="barRight">
          <el-input v-model="input" placeholder="查找..." class="barInput" size="mini"></el-input>
          <el-button slot="append" icon="el-icon-search" size="mini"></el-button>
        </div>
      </div>
      <vue-easy-print v-show="false" ref="easyPrint" :table-show="false" :space-row="true">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="depName" label="部门" width="139"></el-table-column>
          <el-table-column prop="username" label="成员" width="150"></el-table-column>
          <el-table-column prop="monday" label="星期一" width="200">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small"
                v-for="item in scope.row.attendanceVoList">
                <template v-if="item.day == '星期一'">
                  {{ item.typeName }} : {{ item.time }}
                </template>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="tuesday" label="星期二" width="200">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small"
                v-for="item in scope.row.attendanceVoList">
                <template v-if="item.day == '星期二'">
                  {{ item.typeName }} : {{ item.time }}
                </template>

              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="wednesday" label="星期三" width="200">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small"
                v-for="item in scope.row.attendanceVoList">
                <template v-if="item.day == '星期三'">
                  {{ item.typeName }} : {{ item.time }}
                </template>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="thursday" label="星期四" width="200">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small"
                v-for="item in scope.row.attendanceVoList">
                <template v-if="item.day == '星期四'">
                  {{ item.typeName }} : {{ item.time }}
                </template>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="friday" label="星期五" width="200">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small"
                v-for="item in scope.row.attendanceVoList">
                <template v-if="item.day == '星期五'">
                  {{ item.typeName }} : {{ item.time }}
                </template>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="saturday" label="星期六" width="200">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small"
                v-for="item in scope.row.attendanceVoList">
                <template v-if="item.day == '星期六'">
                  {{ item.typeName }} : {{ item.time }}
                </template>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="sunday" label="星期天" width="200">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small"
                v-for="item in scope.row.attendanceVoList">
                <template v-if="item.day == '星期天'">
                  {{ item.typeName }} : {{ item.time }}
                </template>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </vue-easy-print>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="depName" label="部门" width="139"></el-table-column>
        <el-table-column prop="username" label="成员" width="150"></el-table-column>
        <el-table-column prop="monday" label="星期一" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              v-for="item in scope.row.attendanceVoList">
              <template v-if="item.day == '星期一'">
                {{ item.typeName }} : {{ item.time }}
              </template>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="tuesday" label="星期二" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              v-for="item in scope.row.attendanceVoList">
              <template v-if="item.day == '星期二'">
                {{ item.typeName }} : {{ item.time }}
              </template>

            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="wednesday" label="星期三" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              v-for="item in scope.row.attendanceVoList">
              <template v-if="item.day == '星期三'">
                {{ item.typeName }} : {{ item.time }}
              </template>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="thursday" label="星期四" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              v-for="item in scope.row.attendanceVoList">
              <template v-if="item.day == '星期四'">
                {{ item.typeName }} : {{ item.time }}
              </template>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="friday" label="星期五" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              v-for="item in scope.row.attendanceVoList">
              <template v-if="item.day == '星期五'">
                {{ item.typeName }} : {{ item.time }}
              </template>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="saturday" label="星期六" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              v-for="item in scope.row.attendanceVoList">
              <template v-if="item.day == '星期六'">
                {{ item.typeName }} : {{ item.time }}
              </template>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="sunday" label="星期天" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              v-for="item in scope.row.attendanceVoList">
              <template v-if="item.day == '星期天'">
                {{ item.typeName }} : {{ item.time }}
              </template>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import vueEasyPrint from 'vue-easy-print'
import dayjs from 'dayjs'
export default {
  name: '',
  components: {
    vueEasyPrint,
  },
  mixins: [],
  props: {

  },
  data() {
    return {
      input: "",
      tableData: [],
      dayDate: [{ type: 1 }],
      nowWeek: "",
      nextWeek: "",
    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {

  },
  methods: {
    //上周时间
    reduceWeek() {
      this.nowWeek = dayjs(this.nowWeek).subtract(7, 'DAY').format('YYYY-MM-DD');
      this.nextWeek = dayjs(this.nextWeek).subtract(7, 'DAY').format('YYYY-MM-DD');
      // console.log(dayjs().format("H:M"));
      this.attWeekData()



    },
    //下周时间
    increaseWeek() {
      this.nowWeek = dayjs(this.nowWeek).add(7, 'DAY').format('YYYY-MM-DD');
      this.nextWeek = dayjs(this.nextWeek).add(7, 'DAY').format('YYYY-MM-DD');
      this.attWeekData()

    },
    async attWeekData() {
      let res = await this.$api.checking.postAttWeekData({ pageNum: 1, pageSize: 6, startTime: this.nowWeek, endTime: this.nextWeek });
      this.tableData = [...res.data.data.list];
      for (let i = 0; i < this.tableData.length; i++) {
        for (let j = 0; j < this.tableData[i].attendanceVoList.length; j++) {
          this.tableData[i].attendanceVoList[j].createTime
          if (dayjs(this.tableData[i].attendanceVoList[j].createTime).day() == 1) {
            this.tableData[i].attendanceVoList[j].day = "星期一"
            this.tableData[i].attendanceVoList[j].time = dayjs(this.tableData[i].attendanceVoList[j].createTime).format("HH:mm:ss")
          } else if (dayjs(this.tableData[i].attendanceVoList[j].createTime).day() == 2) {
            this.tableData[i].attendanceVoList[j].day = "星期二"
            this.tableData[i].attendanceVoList[j].time = dayjs(this.tableData[i].attendanceVoList[j].createTime).format("HH:mm:ss")
          } else if (dayjs(this.tableData[i].attendanceVoList[j].createTime).day() == 3) {
            this.tableData[i].attendanceVoList[j].day = "星期三"
            this.tableData[i].attendanceVoList[j].time = dayjs(this.tableData[i].attendanceVoList[j].createTime).format("HH:mm:ss")
          } else if (dayjs(this.tableData[i].attendanceVoList[j].createTime).day() == 4) {
            this.tableData[i].attendanceVoList[j].day = "星期四"
            this.tableData[i].attendanceVoList[j].time = dayjs(this.tableData[i].attendanceVoList[j].createTime).format("HH:mm:ss")
          } else if (dayjs(this.tableData[i].attendanceVoList[j].createTime).day() == 5) {
            this.tableData[i].attendanceVoList[j].day = "星期五"
            this.tableData[i].attendanceVoList[j].time = dayjs(this.tableData[i].attendanceVoList[j].createTime).format("HH:mm:ss")
          } else if (dayjs(this.tableData[i].attendanceVoList[j].createTime).day() == 6) {
            this.tableData[i].attendanceVoList[j].day = "星期六"
            this.tableData[i].attendanceVoList[j].time = dayjs(this.tableData[i].attendanceVoList[j].createTime).format("HH:mm:ss")
          } else if (dayjs(this.tableData[i].attendanceVoList[j].createTime).day() == 0) {
            this.tableData[i].attendanceVoList[j].day = "星期天"
            this.tableData[i].attendanceVoList[j].time = dayjs(this.tableData[i].attendanceVoList[j].createTime).format("HH:mm:ss")

          }
        }
      };
      for (let i = 0; i < this.tableData.length; i++) {
        for (let j = 0; j < this.tableData[i].attendanceVoList.length; j++) {
          this.tableData[i].attendanceVoList[j].createTime
          if (this.tableData[i].attendanceVoList[j].type == 1) {
            this.tableData[i].attendanceVoList[j].typeName = "上班"
          } else if (this.tableData[i].attendanceVoList[j].type == 2) {
            this.tableData[i].attendanceVoList[j].typeName = "下班"
          } else if (this.tableData[i].attendanceVoList[j].type == 3) {
            this.tableData[i].attendanceVoList[j].typeName = "外出"
          } else if (this.tableData[i].attendanceVoList[j].type == 4) {
            this.tableData[i].attendanceVoList[j].typeName = "请假"
          } else if (this.tableData[i].attendanceVoList[j].type == 5) {
            this.tableData[i].attendanceVoList[j].typeName = "加班"
          }
        }
      }
      // console.log(res.data.data.list);
      console.log(this.tableData);



    },
    handleClick(val) {
      console.log(val);
    },
    printMySendList() {

      this.$refs.easyPrint.print()
    }


  },
  created() {
    //获取当前时间
    this.nowWeek = dayjs().format('YYYY-MM-DD');//dayjs() 现在的时间，format('YYYY-MM-DD')输出时间的格式

    //下个周的时间
    this.nextWeek = dayjs(this.nowWeek).add(7, 'DAY').format('YYYY-MM-DD');
    this.attWeekData()
    console.log(this.dayDate);
  }
};
</script>

<style lang='less' scoped>
.header {
  position: relative;
  padding: 15px 15px 0 15px;
  display: flex;
  justify-content: space-between;
}

.header>h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.header-right {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.el-icon-arrow-right {
  padding: 0 5px;
  color: #ccc;
}

.el-icon-s-home {
  color: #444;
  display: inline-block;
  margin-right: 5px;
}

.font-left {
  color: #444;
}

.font-right {
  color: #777;
}

.content {
  padding: 15px;
  background-color: #f5f5f5;
}

.bar {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 10px;
  border-top: 3px solid #d2d6de;
  border-bottom: 1px solid #f4f4f4;
}

.barLeft {
  display: flex;
  align-items: center;
}

.barLeft>div {
  margin-left: 5px;
}

.barRight {
  display: flex;
}

.el-button-success {
  background-color: red;
}

.el-table-column {
  color: #333333;
  height: 37px;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fafafa;
  line-height: 30px;
}

.footerLeft {
  display: flex;
  margin-left: 5px;
  font-size: 12px;
}

.footerLeft>div {
  padding: 2px;
}

.mid {
  display: inline-block;
  margin: 0 5px;
}

.footerLeft>div>span {
  padding: 0 10px;
}

.footerRight {
  display: flex;
}

.footerBtn {
  width: 30px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}</style>